<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 调用次数太多,需重复计算, -->
    <button @click="lastName = 'Jackson'">更改</button>
    <div>{{fullName()}}</div>
    <div>{{fullName()}}</div>
    <div>{{fullName()}}</div>
    <div>{{fullName()}}</div>
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data(){
      return{
        firstName: "Michael",
        lastName:"Jorden",
      }
    },
    methods:{
      fullName(){
        console.log("计算用")
        return this.firstName.toLowerCase() + " " + this.lastName.toLowerCase()
      }
    }
  })
</script>
</body>
</html>